<template>
	<view class="container">
		<view class="header">
			<view class="header__top">
				<u-tabs :current="current" :list="list1" @change="changeTabs" lineHeight="0" itemStyle="margin-left: 0; margin-right: 50rpx; 
							padding: 0;" activeStyle="background: #61BDB2;padding: 12rpx 24rpx;border-radius: 20rpx;color: #ffffff;"
					inactiveStyle="
							background: #F6F6F6;padding: 12rpx 24rpx;border-radius: 20rpx">
				</u-tabs>
			</view>
			<view class="header__bottom">
				<view class="sort-box">
					<view @click="()=>{SelectPopupShow = true}">
						<text>{{stateLabel}}</text>
						<text class="iconfont icon-xiala"></text>
					</view>
					<view @click="showCalendarHandel">
						<text>{{defaultTimeArr.length != 0 ? dataLabel : $t('order.Date')}}</text>
						<text class="iconfont icon-xiala"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="scroll-content" v-if="flowList && flowList.length > 0">
			<scroll-view scroll-y="true" class="scroll-Y" :refresher-enabled="true" refresher-background="#f6f6f6"
				:refresher-triggered="refresherState" @scrolltolower="scrolltolower" @refresherrefresh="refresher">
				<view class="scroll-content__item" v-for="(item, index) in flowList" :key="item.flowId">
					<view class="scroll-content__item__top">
						<view style="flex: 1;">
							<!-- {{flowType[item.module] || item.moduleName }} -->
							{{ item.moduleName }}
						</view>

						<view v-if="item.amount && item.amount.slice(0,1) == '-'">
							{{parseFloat(item.amount)}} {{item.currencyVo && item.currencyVo.symbol}}
						</view>
						<view v-else style="color: #61BDB2;">
							+{{parseFloat(item.amount)}} {{item.currencyVo && item.currencyVo.symbol}}
						</view>
					</view>
					<view class="scroll-content__item__bottom">
						{{item.createTime}}
					</view>
				</view>
				<u-loadmore :status="loadStatus" v-if="loadStatus == 'loading' || loadStatus == 'nomore'" />
			</scroll-view>
		</view>
		 <u-empty v-else :text="$t('EmptyData')" textColor="#878787" textSize="14" width="104" height="100" marginTop="80" icon="/static/image/bourse/none_order.png"></u-empty>
		<u-calendar :show="showCalendar" v-if="showCalendar" color="#61BDB2" mode="range" @confirm="confirmCalendar"
			@close="closeCalendar" monthNum="12" :allowSameDay="true" :startText="$t('order.start')"
			:endText="$t('order.end')" :minDate="minDate" :maxDate="todayTime" :confirmText="$t('index.Confirm')"
			:confirmDisabledText="$t('index.Confirm')" :title="$t('order.Date-Selection')"
			:defaultDate="defaultTimeArr.length !==0 ? defaultTimeArr : [todayTime]" @resetTime="resetTime"
			:resetText="$t('index.reset')">
		</u-calendar>
		<SelectPopup :show.sync="SelectPopupShow" :option="rechargeStatus" :title="$t('order.State')" :value="oderStatus"
			@finish="onChangeStatus" v-if="SelectPopupShow"></SelectPopup>
	</view>
</template>

<script>
	import SelectPopup from "@/components/SelectPopup.vue";
	import {
		getWalletDetailList
	} from '@/services/user.js'
	import {
		flowType
	} from '@/utils/flowType.js'
	import moment from "moment";
	export default {
		components: {
			SelectPopup
		},
		data() {
			return {
				list1: [{
						name: this.$t('order.All'),
						value: ''
					},
					{
						name: this.$t("user.Trading-Center"),
						value: [200, 299]
					}, {
						name: this.$t("discover.Dating"),
						value: [300, 399]
					},
					{
						name: this.$t('discover.Jobs'),
						value: [400, 499]
					},
					{
						name: this.$t('discover.Services-for-a-fee'),
						value: [500, 599]
					},
					{
						name: this.$t('discover.information'),
						value: [600, 799]
					},
				],
				SelectPopupShow: false,
				showCalendar: false,
				oderStatus: '',
				current: 0,
				defaultTimeArr: [],
				minDate: '',
				todayTime: [],
				params: {
					pageSize: 10,
					pageNum: 1,
					orderByColumn: 'createTime',
					isAsc: 'desc'
				},
				otherParams: {
					flowType: '',
					beginModule: 0,
					endModule: 1,
					beginCreateTime: '',
					endCreateTime: ''
				},
				total: 0,
				flowList: [],
				refresherState: false,
				loadStatus: '1',
			}
		},
		onLoad() {
			//上3月的开始时间
			this.minDate = moment().subtract(10, 'months').startOf('days').format("YYYY-MM-DD HH:mm:ss")
			this.todayTime = moment().startOf('days').format("YYYY-MM-DD")
			this.otherParams.beginModule = this.list1[this.current].value[0]
			this.otherParams.endModule = this.list1[this.current].value[1]
			this.init()
		},
		computed: {
			flowType() {
				return flowType
			},
			stateLabel() {
				if (this.oderStatus == -1) {
					return this.$t('order.All')
				} else {
					return this.rechargeStatus.filter(t => t.value == this.oderStatus)[0].label
				}
			},
			dataLabel() {
				const beginCreateTime = moment(this.defaultTimeArr[0]).startOf('days').format("MM/DD")
				const endCreateTime = moment(this.defaultTimeArr[this.defaultTimeArr.length - 1]).endOf('days').format(
					"MM/DD")
				return beginCreateTime + '-' + endCreateTime
			},
			// 0 已冻结 1正在出售 2等待付款 10已付款 20已完成	 30投诉 40已取消
			rechargeStatus() {
				return [{
						label: this.$t('order.All'),
						value: ''
					}, {
						label: this.$t('order.income'),
						value: 1
					},
					{
						label: this.$t('order.pay'),
						value: 2
					}
				]
			}
		},
		methods: {
			// 初始化数据
			init() {
				this.params.pageNum = 1
				this.loadStatus = '1'
				this._getWalletDetailList()
			},
			// 获取详情列表
			async _getWalletDetailList(val) {
				if (val) this.loadStatus = 'loading'
				const {
					success,
					result
				} = await getWalletDetailList({
					...this.otherParams,
					...this.params
				})
				const {
					rows,
					total
				} = result
				this.refresherState = false
				if (success) {
					this.total = total
					val ? this.flowList = [...this.flowList, ...rows] : this.flowList = rows
				}
			},
			scrolltolower() {
				if (this.flowList.length < this.total) {
					this.params.pageNum++
					this._getWalletDetailList(1)
				} else {
					this.loadStatus = 'nomore'
				}

			},
			refresher() {
				this.refresherState = true
				this.init()
			},
			changeTabs(val) {
				this.otherParams.beginModule = val.value[0]
				this.otherParams.endModule = val.value[1]
				this.init()
			},
			onChangeStatus(val) {
				this.oderStatus = val
				this.otherParams.flowType = val
				this.init()
			},
			confirmCalendar(timeArr) {
				console.log(timeArr);
				const timeObj = {
					beginCreateTime: moment(timeArr[0]).startOf('days').format("YYYY-MM-DD HH:mm:ss"),
					endCreateTime: moment(timeArr[timeArr.length - 1]).endOf('days').format("YYYY-MM-DD HH:mm:ss")
				}
				this.showCalendar = false
				this.defaultTimeArr = timeArr
				this.otherParams.beginCreateTime = timeObj.beginCreateTime
				this.otherParams.endCreateTime = timeObj.endCreateTime
				this.init()
			},
			showCalendarHandel() {
				this.showCalendar = true

			},
			closeCalendar() {
				this.showCalendar = false
			},
			resetTime() {
				this.defaultTimeArr = []
				this.otherParams.beginCreateTime = ''
				this.otherParams.endCreateTime = ''
				this.showCalendar = false
				this.init()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-popup {
		flex: 0 !important;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 44px - var(--status-bar-height))
	}

	.header {
		background-color: #FFFFFF;

		&__top {
			padding: 20rpx 30rpx;
			padding-bottom: 0;
		}

		&__bottom {
			.sort-box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 28rpx;
				font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
				font-weight: 400;
				color: #000000;
				line-height: 80rpx;
				height: 80rpx;

				.icon-xiala {
					color: #bfbfbf;
					font-size: 12px;
				}
			}
		}
	}

	.scroll-content {
		flex: 1;
		padding: 30rpx;
		overflow: hidden;
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
		font-weight: 400;

		.scroll-Y {
			height: 100%;
		}

		&__item {
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			&__top {
				display: flex;
				font-size: 32rpx;
				color: #606665;
				line-height: 48rpx;

				&>view:last-child {
					margin-left: auto;
					font-weight: 600;
				}
			}

			&__bottom {
				font-size: 28rpx;
				color: rgba(135, 135, 135, 0.6);
				line-height: 40rpx;
				margin-top: 16rpx;
			}
		}
	}
</style>